<!-- Created by mhy on 2018/6/27.

 -->
 <style lang="scss" scoped>
    .add-top{
        position: relative;
        height:40px;
        font-size:28px;
        margin-top: 36px;
        color:rgba(48,54,65,1);
        line-height:40px;
        text-align: left;
        padding-left: 50px;
        box-sizing: border-box;
    }

    .add-cancel-btn{
        position: absolute;
        width:80px;
        height:37px;
        font-size:12px;
        background:rgba(255,255,255,1);
        border-radius:5px;
        border:1px solid rgba(151,151,151,1);
        right: 0; top: 50%;
        transform: translateY(-50%);
        outline: none;
        color: #303641;
        cursor: pointer;
    }

    .add-line{
        height: 2px;
        margin: 18px 0 0 0;
        background: #979797;
    }

    .x-label{
        height:17px;
        font-size:12px;
        color:rgba(48,54,65,1);
        line-height:17px;
        margin: 30px 0 10px 0;
        text-align: left;
    }

    .scan-wrap{
        position: relative;
        width: 750px;
        margin: 0 auto;
    }

    .add-block{
        position: relative;
        width: 750px;
        height: 82px;
        margin: 0 auto;
        border-bottom: 1px solid #E5E5E5;
    }

    .add-block-label{
        position: absolute;
        height:22px;
        font-size:16px;
        color:rgba(245,166,35,1);
        line-height:22px;
        top: 50%; transform: translateY(-50%);
    }

    .cancel-btn{
        position: absolute;
        right: 0;
        top: 50%; transform: translateY(-50%);
        width:100px;
        height:38px;
      line-height: 38px;
        background:rgba(230,67,64,1);
        border-radius:5px;
        color: #fff;
    }

    .scan-top-box{
        position: relative;
        width: 690px;
        height:74px;
        font-size:26px;
        color:rgba(48,54,65,1);
        line-height:37px;
        margin: 0 auto;
        margin-top: 59px;
    }

    .wx-code{
        position: relative;
        width: 320px; height: 320px;
        margin: 30px auto;
    }

    .wx-desc{
        display: block;
        height:37px;
        font-size:26px;
        color:rgba(136,136,136,1);
        line-height:37px;
        margin-bottom: 102px;
        margin-top: 100px;
        text-decoration: none;
    }

    .wx-update-btn{
        position: absolute;
        right: 0; top: 50%;
        transform: translateY(-50%);
        /*width:60px;*/
        height:38px;
        background:rgba(255,255,255,1);
        border-radius:5px;
        border:1px solid rgba(151,151,151,1);
        font-size:14px;
        color:rgba(48,54,65,1);
        text-align: center;
        line-height: 38px;
    }

    .green{
        color: #39B866;
    }

    .wx-code-success{
        position: absolute;
        width: 320px; height: 320px;
        /*transform: translate(-50%, -50%);*/
    }

    .wx-code-error{
        position: absolute;
        width: 186px; height: 186px;
        left: 50%; top: 50%;
        transform: translate(-50%, -50%);
    }

    .wx-bind-error{
        text-align: center;
        height:56px;
        font-size:40px;
        color:rgba(255,82,62,1);
        line-height:56px;
        transform: translateY(-40px);
    }

    .wx-contain{
        position: relative;
        width: 100%; height: 100%;
    }

    button{
        cursor: pointer;
    }
 </style>

<template>
<div class="frame-index">
    <div class="frame-content" v-loading="loading">
        <div class="add-top">
            {{username}}
            <!--<button class="wx-update-btn" style="right: 50px;width: 100px;height: 38px;color: white;background-color: #E64340" @click="getWxInfo(code)" v-if="wxUserInfo.openid">取消授权</button>-->
        </div>

        <div class="add-line"></div>

        <div class="add-block" v-if="!wxUserInfo.openid">
            <div class="add-block-label">等待绑定授权</div>
            <button class="cancel-btn" @click="$router.back()">取消授权</button>
            <!-- <button class="wx-update-btn" v-else>刷新</button> -->
        </div>
      <div class="add-block" v-else-if="wxUserInfo.openid && registState">
        <div class="add-block-label" >正常状态</div>
      </div>
      <div class="add-block" v-else>
            <div class="add-block-label" style="color: #FF523E;">未绑定，授权超时</div>
          <div class="cancel-btn" style="background-color: #FF523E;color: white" @click="routerToHomepage" >取消授权</div>
        </div>


        <div class="scan-top-box" v-if="!wxUserInfo.openid">
            让同事使用微信扫码授权，即可成为子管理员。<br/>此二维码10分钟内有效
        </div>

        <div class="scan-top-box" v-else-if="wxUserInfo.openid && registState">
            微信用户“{{wxUserInfo.nickname}}”已扫码授权，并成为“{{username}}”的子管理员
        </div>

        <div class="wx-code">
            <div class="wx-contain" id="wxDom" v-if="!wxUserInfo.openid"></div>
            <img :src="wxUserInfo.headimgurl" class="wx-code-success" v-else-if="wxUserInfo.openid && registState" >
            <img src="xxx.png" class="wx-code-error" v-else-if="wxUserInfo.openid && !registState">
        </div>

        <a class="wx-desc" v-if="!wxUserInfo.openid">点击下载二维码图片 或 右击复制</a>
        <p class="wx-desc" v-if="wxUserInfo.openid && !registState" @click="wxLoginRefresh" style="background-color: #39B866;color: white;width: 750px;height: 50px;line-height: 50px;border-radius: 6px;margin-left: auto;margin-right: auto">重新生成动态二维码</p>
        <div class="wx-desc green" v-else-if="wxUserInfo.openid && registState">通过验证，授权成功</div>
        <template v-else-if="wxUserInfo.openid && !registState">
            <div class="wx-bind-error">绑定失败</div>
            <div class="wx-desc" >由于超时未操作，{{username}}的子管理员未绑定成功</div>
        </template>

        <div class="scan-wrap">
            <Uitem label="名字" :text="username"/>
            <Uitem label="管理权限" :text="authStr"/>
            <Uitem label="职能" :text="duty"/>
        </div>
    </div>
  </div>
</template>

<script>
    import {mapActions,mapState} from 'vuex'
    import Uitem from '../../components/user/u-item.vue'
    import URL from 'url'
    import axios from 'axios'
    export default {
      data() {
        return{
            loading: false,
            auth: '',
            duty: '',
            username: '',
            authObj: {
                frame: '框条库',
                matcard: '卡纸库',
                background: '背景库',
                sence: '场景库',
                user: '用户管理',
                shop: '商户管理',
                factory: '厂家管理',
                viptime: 'VIP时间管理',
                price: 'VIP价格管理'
            },
            wxUserInfo: {},
            registState: false,
            code: ''
        }
      },
      components:{
        Uitem
      },
      methods: {
        ...mapActions([
          'addSubManager',
          'infoWithWX',
          'getUserInfo'
        ]),
        init () {
            this.username = ''
            this.auth = ''
            this.duty = ''
        },
        submit () {

        },
        routerToHomepage(){
          location.href = 'http://test.51artx.com/dist/#/homepage'
        },
        wxLoginRefresh(){
            location.href = 'http://test.51artx.com/dist/#/plate/scan/'
        },
        wxLogin () {
          localStorage.setItem('codepath', '/plate/scan')
            var obj = new WxLogin({
                id:"wxDom",
                appid: "wx7d663c06d928b088",
                scope: 'snsapi_login',
//              redirect_uri: window.encodeURI(location.href)
                redirect_uri: window.encodeURI('http://test.51artx.com/dist/#/plate/scan/')
            })
        },
        updateWxVerify () {
            this.$dialog.loading.open('loading...')
            this.addSubManager({
                action: 'addSubManager',
                username: this.username,
                deviceid: 'deviceid' + String(Date.now()).slice(-6) + Math.random(),
                usericon: this.wxUserInfo.headimgurl,
                wxusername: this.wxUserInfo.nickname,
                auth: this.auth,
                duty: this.duty,
                openid: this.wxUserInfo.openid,
                userid: localStorage.getItem('userid')
            })
            .then(data => {
                this.registState = true
                this.$dialog.toast({
                    mes: '授权成功',
                    timeout: 3000,
                    icon: 'success'
                })
            })
            .catch(err => {
                this.registState = false
//                this.wxLogin()
                this.$dialog.toast({
                    mes: '信息错误或子管理员已存在',
                    timeout: 3000,
                    icon: 'error'
                })
            })
            .finally(() => {
                this.$dialog.loading.close()
            })
        },
        getWxInfo (code) {
            this.registState = false
            localStorage.setItem('codepath', '')
            this.infoWithWX({code: code})
            .then(data => {
                this.wxUserInfo = data.result
                this.updateWxVerify()
            })
              .catch(err => {
//          var str = location.href; //取得整个地址栏
//          var num = str.indexOf("?");
//          str = str.substr(num + 1);
                location.href = 'http://test.51artx.com/dist/#/plate/scan'
                this.$dialog.toast({
                  mes: '获取微信扫码信息失败，请重新扫描二维码',
                  icon: 'error',
                  timeout: 3000
                })
              })
//            axios.get(`https://api.weixin.qq.com/sns/oauth2/access_token`, {
//                params: {
//                    appid: 'wx7d663c06d928b088',
//                    secret: 'c196ef3799354c59528e681978a131ea',
//                    code: code,
//                    grant_type: 'authorization_code'
//                }
//            }).then(data => {
//                axios.get('https://api.weixin.qq.com/sns/userinfo', {
//                    params: {
//                        access_token: data.access_token,
//                        openid: data.openid
//                    }
//                })
//                .then(data => {
//                    this.wxUserInfo = data
//                    this.updateWxVerify()
//                })
//            })
        },
        getUrlParam: function () {
          var params = {};
          var str = location.href; //取得整个地址栏
          var num = str.indexOf("?");
          str = str.substr(num + 1); //取得所有参数   stringvar.substr(start [, length ]

          var arr = str.split("&"); //各个参数放到数组里
          for (var i = 0; i < arr.length; i++) {
            num = arr[i].indexOf("=");
            if (num > 0) {
              var name = arr[i].substring(0, num);
              var value = arr[i].substr(num + 1);
              params[name] = value
            }
          }
          return params
        },
      },
      computed: {
        authStr () {
            return this.auth.split(/#|,/).map(val => {
                return this.authObj[val]
            }).join(',')
        }
      },
      mounted (){
        this.$store.state.navTitle = '新增平台子管理员'
        if (this.getUrlParam()['code']) {
          this.username = localStorage.getItem('pltusername')
          this.auth = localStorage.getItem('pltauth')
          this.duty = localStorage.getItem('pltduty')
          this.code = this.getUrlParam()['code']
          this.getWxInfo(this.getUrlParam()['code'])
        } else {
          this.username = localStorage.getItem('pltusername')
          this.auth = localStorage.getItem('pltauth')
          this.duty = localStorage.getItem('pltduty')
          this.wxLogin()
        }
      }
    }
</script>

<style scoped lang="scss">

   .frame-index{
      position: relative;
      width: 100%; overflow: hidden;
      background:#F2F2F2;
    }

    .frame-content{
        position: relative;
        width: 850px;
        margin: 70px auto;
        background: #fff;
        overflow: hidden;
    }

    .up-box{
        margin: 100px auto;
    }

    .m-mb-30{
        margin-bottom: 30px;
    }

    .up-tip{
        height:17px;
        font-size:12px;
        color:rgba(48,54,65,1);
        line-height:17px;
        text-align: center;
        margin-top: 61px;
    }

    .up-submit{
        display: block;
        height:50px; width: 100%;
        background:rgba(57,184,102,1);
        border-radius:6px;
        font-size:16px;
        color: #fff;
        text-align: center; line-height: 50px;
        margin-top: 22px;
    }

    button:disabled {
        opacity: .5;
    }

    .up-cancel{
        @extend .up-submit;
        color:rgba(48,54,65,1);
        background: #fff;
        margin-bottom: 90px;
    }

</style>
